<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加宠物</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        
        form { max-width: 600px; margin: 0 auto; }
        label { display: block; margin-bottom: 5px; font-weight: 500; }
        input, select, textarea { 
            width: 100%; 
            padding: 8px; 
            margin-bottom: 15px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            box-sizing: border-box;
        }
        .form-group { margin-bottom: 15px; }
        .form-group-inline { display: flex; gap: 10px; }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        input[type="submit"]:hover {
            background-color: #2980b9;
        }
        .info-text {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>添加宠物信息</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <div class="card">
        
        <div class="error-message">
    <c:if test="${not empty error}">
        <p style="color: red;">${error}</p>
    </c:if>
</div>
        
           <form action="addPet" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="name">宠物名称：</label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="number">宠物编号：</label>
                    <input type="text" id="number" name="number" required>
                </div>
                
                 <div class="form-group">
                <label for="image">宠物图片</label>
                <input type="file" id="image" name="image">
            </div>
                
                <div class="form-group">
                    <label for="attribute">宠物属性：</label>
                    <select id="attribute" name="attribute" required>
                        <option value="火">火</option>
                        <option value="水">水</option>
                        <option value="草">草</option>
                        <option value="电">电</option>
                        <option value="冰">冰</option>
                        <option value="普通">普通</option>
                    </select>
                </div>
                
                <div class="form-group-inline">
                    <div>
                        <label for="energy">精力：</label>
                        <input type="number" id="energy" name="energy" min="0" max="200" required>
                    </div>
                    <div>
                        <label for="attack">攻击：</label>
                        <input type="number" id="attack" name="attack" min="0" max="200" required>
                    </div>
                    <div>
                        <label for="magicAttack">魔攻：</label>
                        <input type="number" id="magicAttack" name="magicAttack" min="0" max="200" required>
                    </div>
                </div>
                
                <div class="form-group-inline">
                    <div>
                        <label for="defense">防御：</label>
                        <input type="number" id="defense" name="defense" min="0" max="200" required>
                    </div>
                    <div>
                        <label for="magicDefense">魔防：</label>
                        <input type="number" id="magicDefense" name="magicDefense" min="0" max="200" required>
                    </div>
                    <div>
                        <label for="speed">速度：</label>
                        <input type="number" id="speed" name="speed" min="0" max="200" required>
                    </div>
                </div>
                
                <div class="form-group-inline">
                    <div>
                        <label for="height">身高（m）：</label>
                        <input type="number" id="height" name="height" step="0.01" required>
                    </div>
                    <div>
                        <label for="weight">体重（kg）：</label>
                        <input type="number" id="weight" name="weight" step="0.01" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="introduction">宠物简介：</label>
                    <textarea id="introduction" name="introduction" rows="4" required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="preEvolutionNumber">前置进化编号：</label>
                    <input type="text" id="preEvolutionNumber" name="preEvolutionNumber" required>
                    <p class="info-text">若无前置进化，填自身编号</p>
                </div>
                
                <div class="form-group">
                    <label for="postEvolutionNumber">后置进化编号：</label>
                    <input type="text" id="postEvolutionNumber" name="postEvolutionNumber">
                    <p class="info-text">若无后置进化，留空即可</p>
                </div>
                
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
    
   
</body>
</html>